<template>
  <view class="bank">
    <view class="bank-box">
      <u-form :model="form" ref="uForm" :label-width="152">
        <u-form-item
          ref="phone"
          prop="phone"
          label="手机号码"
          class="form-item-box"
          required
        >
          <u-input
            :disabled="true"
            v-model="form.phone"
            placeholder="请输入手机号码"
          />
        </u-form-item>
        <u-form-item
          ref="verificationCode"
          prop="verificationCode"
          label="验证码"
          class="form-item-box"
          required
        >
          <u-input
            type="number"
            v-model="form.verificationCode"
            placeholder="请输入验证码"
          />
          <view class="code" :class="{ disabled: timer }" @click="sendCode">
            {{ codeText }}
          </view>
        </u-form-item>
      </u-form>
    </view>
    <view class="submit-btn" @click="handleSubmit">确定</view>
    <AlertModal
      :showModal="showModal"
      desc="短信验证成功"
      mode="2"
      @confirm="handleConfirm"
      :showCancel="false"
    />
  </view>
</template>
<script>
import AlertModal from './Modal.vue'

export default {
  components: {
    AlertModal,
  },
  data() {
    return {
      showKeyboard: false,
      showModal: false,
      form: {
        phone: '',
        verificationCode: '',
      },
      timer: null,
      time: 60,
      rules: {
        phone: [
          {
            required: true,
            message: '请输入手机号',
            trigger: ['change', 'blur'],
          },
          {
            // 自定义验证函数，见上说明
            validator: (rule, value, callback) => {
              // 上面有说，返回true表示校验通过，返回false表示不通过
              // this.$u.test.mobile()就是返回true或者false的
              return this.$u.test.mobile(value)
            },
            message: '手机号码不正确',
            // 触发器可以同时用blur和change
            trigger: ['change', 'blur'],
          },
        ],
        verificationCode: [
          {
            required: true,
            message: '请输入验证码',
            trigger: ['change', 'blur'],
          },
        ],
      },
      userInfo: {},
      account: '',
      personalIdentity3Key: '',
    }
  },
  onReady() {
    this.$refs.uForm.setRules(this.rules)
  },
  onShow() {
    this.getuserInfo()
  },
  computed: {
    codeText() {
      if (!this.timer) {
        return '获取验证码'
      } else {
        return `${this.time}s后重新获取`
      }
    },
  },
  methods: {
    //触发校验
    triggerSingleFieldValidate(refName) {
      this.$refs[refName].onFieldChange()
    },
    handleShowKeyboard(type) {
      this.currentInput = type
      this.showKeyboard = true
    },
    async getuserInfo() {
      const res = await this.$u.get('/freight-business/get/userInfo')
      if (res.code === '0') {
        uni.setStorageSync('userInfo', res.result)
        this.userInfo = res.result
        this.form.phone = this.userInfo.phone
      } else {
        this.$api.msg(res.message)
      }
    },
    handleConfirm() {
      this.showModal = false
      uni.navigateBack()
    },
    async sendCode() {
      const { code, result, message } = await this.$u.post(
        '/freight-business/freightSsqInfo/smsSender',
        {
          type: 1,
          name: this.userInfo.driverInfo.driverName,
          mobile: this.userInfo.driverInfo.driverPhone,
          identity: this.userInfo.driverInfo.driverIdcardNo,
        }
      )
      if (code === '0') {
        this.account = result.account
        this.personalIdentity3Key = result.personalIdentity3Key
        if (this.timer) return
        if (this.form.phone) {
          this.timer = setInterval(() => {
            this.time--
            if (this.time < 1) {
              clearInterval(this.timer)
              this.timer = null
              this.time = 60
            }
          }, 1000)
        } else {
          this.$api.msg('请先输入手机号码')
        }
        this.$api.msg('短信验证已发送')
      } else {
        this.$api.msg(message)
      }
    },
    handleSubmit() {
      this.$refs.uForm.validate((valid) => {
        if (valid) {
          this.submitData()
        } else {
          this.$api.msg('请填写相关信息')
        }
      })
    },
    async submitData(val) {
      const { code, message } = await this.$u.post(
        '/freight-business/freightSsqInfo/codeVerify',
        {
          vcode: this.form.verificationCode,
          account: this.account,
          personalIdentity3Key: this.personalIdentity3Key,
        }
      )
      if (code === '0') {
        this.showModal = true
      } else {
        this.$api.msg(message)
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.bank {
  min-height: 100vh;
  background: #f6f6f6;
  padding: 30rpx;
  box-sizing: border-box;
  &-box {
    width: 690rpx;
    background: #ffffff;
    border-radius: 10rpx;
    padding: 0 24rpx;
    box-sizing: border-box;
  }
}
.code {
  width: 140rpx;
  height: 48rpx;
  background: #387cf9;
  border-radius: 8rpx;
  text-align: center;
  line-height: 48rpx;
  color: #fff;
  font-size: 24rpx;
  font-weight: 500;
  color: #ffffff;
  &.disabled {
    background: #eee;
    width: 180rpx;
  }
}
.submit-btn {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 80rpx;
  width: 690rpx;
  height: 80rpx;
  margin: 0 auto;
  background: #378afb;
  border-radius: 10rpx;
  text-align: center;
  line-height: 80rpx;
  color: #fff;
  font-size: 32rpx;
  font-weight: 500;
  color: #ffffff;
}
.alert {
  font-size: 28rpx;
  color: #f97825;
  line-height: 40rpx;
  margin-top: 24rpx;
}
</style>
